<template>
  <div class="safe-containner">
    <el-row>
      <el-col :span="24">
        <div class="outMore">
          <div class="dataTitle">
            提醒策略配置
          </div>
        </div>
        <div class="safeSearch">
          <div class="outMost">
            <el-form :inline="true" :model="remindBody">
              <el-form-item class="handItem" label="配件编码:">
                <el-input class="handInput" v-model="remindBody.data.condition.fittings_id"></el-input>
              </el-form-item>
              <el-form-item class="handItem" label="机构:">
                <el-select class="handInput" v-model="remindBody.data.condition.fittings_type" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="handItem" label="配件名称:">
                <el-input class="handInput" v-model="remindBody.data.condition.name"></el-input>
              </el-form-item>
              <el-form-item class="handItem">
                <el-button type="primary" @click="getRemindList">查询</el-button>
              </el-form-item>
              <el-form-item class="handItem">
                <el-button class="clear" type="primary" @click="replaceSearch">重置</el-button>
              </el-form-item>
              <el-form-item class="handItem" style="float: right">
                <el-button class="indieWidth" type="primary" @click="addReminding">
                  <img :src="addReplaceImg"/>新增
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="safeTableList">
          <el-dialog
            title="提示"
            :visible.sync="dialogDisable"
            width="540px"
            class="safeDisableDialog"
            style="margin-top: 20vh;">
            <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
              <img :src="disableIcon"/>
            </div>
            <span>确认禁用此策略</span>
            <span slot="footer" class="dialog-footer">
              <el-button class="clears" @click="dialogDisable = false">取 消</el-button>
              <el-button type="primary" style="float: right" @click="disableWork()">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="提示"
            :visible.sync="dialogEnable"
            width="540px"
            class="safeDisableDialog"
            style="margin-top: 20vh;">
            <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
              <img :src="enableIcon"/>
            </div>
            <span>确认启用此策略</span>
            <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogEnable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="enableWork()">确 定</el-button>
        </span>
          </el-dialog>
          <el-table
            :data="remind"
            border
            stripe border fit highlight-current-row
            style="width: 100%;min-height: 500px;max-height: 750px;overflow-y: auto; "
            height="745"
            :header-cell-style="{background:'#D8DEE8',height: '20px',padding:'5px 0px'}">
            <el-table-column
              prop="index"
              align="center"
              label="序号"
              width="60px"
            >
            </el-table-column>
            <el-table-column
              v-for="(column, index) in cols"
              :prop="column.prop"
              :label="column.label"
              :key="index"
              :width="column.width"
              :sortable="column.sortable"
            >
            </el-table-column>
            <el-table-column
              prop="status[0]"
              label="状态"
              width="69px"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status[0] === '启用' ? 'primary' : 'success'"
                  disable-transitions>{{scope.row.status[0]}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="操作"
              width="160px"
            >
              <template slot-scope="scope">
                <el-button class="tableIcon" title="查看" @click="lookJump(scope.$index, scope.row)" type="text" size="small">
                  <img :src="viewIcon"/>
                </el-button>
                <el-button class="tableIcon" title="编辑" @click="editJump(scope.$index, scope.row)" type="text" size="small">
                  <img :src="update"/>
                </el-button>
                <el-button class="tableIcon" title="删除" @click="toDeleteDialog(scope.$index, scope.row)" type="text" size="small">
                  <img :src="deletes"/>
                </el-button>
                <delete-dialog></delete-dialog>
                <span class="segmentingLine">|</span>
                <el-button v-if="scope.row.status[1] === '0'" @click="showEnable(scope.$index,scope.row)" class="tableIcon enableDisableLeft" title="启用" type="text" size="small">
                  <img :src="enable"/>
                </el-button>
                <el-button v-if="scope.row.status[1] === '1'" @click="showDisable(scope.$index,scope.row)" class="tableIcon enableDisableLeft" title="禁用" type="text" size="small">
                  <img :src="disable"/>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container footerPage">
            <el-pagination
              @size-change="remindSizeChange"
              @current-change="remindCurrentChange"
              :current-page="ListQuery.page"
              :page-sizes="[5, 10, 20]"
              :page-size="ListQuery.limit"
              background layout="total, sizes, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import deleteDialog from './components/delete'

  import enable from '@/assets/mSiteAdmin/enable.png'
  import disable from '@/assets/mSiteAdmin/disable.png'
  import deletes from '@/assets/mSiteAdmin/delete.png'
  import remove from '@/assets/mSiteAdmin/remove.png'
  import update from '@/assets/mSiteAdmin/update.png'
  import addReplaceImg from '@/assets/mSiteAdmin/add.png'
  import viewIcon from '@/assets/mSiteAdmin/viewIcon.png'
  import disableIcon from '@/assets/mSiteAdmin/disable-icon.png'
  import enableIcon from '@/assets/mSiteAdmin/enable-icon.png'
  import axios from 'axios'
  export default {
    name: 'safeTime',
    components: { deleteDialog },
    data() {
      return {
        dialogDisable: false,
        dialogEnable: false,
        deleteid: [],
        cols: [
          { prop: 'fittings_id', label: '配件编码', width: '200px' },
          { prop: 'fittings_type_label', label: '机构', width: '200px' },
          { prop: 'name', label: '配件名称' },
          { prop: 'time_service_life', label: '使用寿命(时间)', width: '200px' },
          { prop: 'num_service_life', label: '经验寿命(次数)', width: '220px' },
          { prop: 'cycle_service_life', label: '周期检查提醒', width: '200px' }
        ],
        total: 0,
        ListQuery: {
          page: 2,
          limit: 10,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        enable,
        disable,
        deletes,
        remove,
        update,
        viewIcon,
        disableIcon,
        enableIcon,
        addReplaceImg,
        remind: [],
        options: [],
        // 机构类型获取
        fittingGet: {
          access_token: localStorage.getItem('access_token'),
          type: 'fittings_type_getall'
        },
        // 提醒策略总览请求内容
        remindBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_get_condition',
          data: {
            condition: {
              fittings_id: '',
              fittings_ids: [],
              name: '',
              fittings_type: '',
              fittings_types: [],
              status: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        // 删除提醒策略
        deleteRemindBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_del',
          ids: []
        },
        // 启用提醒策略
        remindEnable: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_enable',
          status: 1,
          ids: []
        },
        // 禁用提醒策略
        remindDisable: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_enable',
          status: 0,
          ids: []
        }
      }
    },
    created() {
      this.getRemindList()
      this.getFitting()
    },
    methods: {
      replaceSearch() {
        this.remindBody.data.condition.fittings_id = ''
        this.remindBody.data.condition.fittings_type = ''
        this.remindBody.data.condition.name = ''
        this.getRemindList()
      },
      // 提醒策略总览
      getRemindList() {
        axios.post('/fittings', this.remindBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.remind = res.data.data.items
          for (let a = 0; a < res.data.data.items.length; a++) {
            this.remind[a].index = (a + 1) + (res.data.data.page.page_number - 1) * res.data.data.page.page_size
          }
          this.total = parseInt(res.data.data.page.total)
          for (let l = 0; l < this.remind.length; l++) {
            this.remind[l].num_service_life = this.remind[l].num_service_life + '次'
            if (this.remind[l].time_type === 1) {
              this.remind[l].time_service_life = this.remind[l].time_service_life + '年'
            } else {
              this.remind[l].time_service_life = this.remind[l].time_service_life + '小时'
            }
            if (this.remind[l].cycle_type === 1) {
              this.remind[l].cycle_service_life = this.remind[l].cycle_service_life + '次/小时'
            } else if (this.remind[l].cycle_type === 2) {
              this.remind[l].cycle_service_life = this.remind[l].cycle_service_life + '次/30天'
            } else if (this.remind[l].cycle_type === 3) {
              this.remind[l].cycle_service_life = this.remind[l].cycle_service_life + '次/60天'
            } else if (this.remind[l].cycle_type === 4) {
              this.remind[l].cycle_service_life = this.remind[l].cycle_service_life + '次/180天'
            } else if (this.remind[l].cycle_type === 5) {
              this.remind[l].cycle_service_life = this.remind[l].cycle_service_life + '次/年'
            }
            if (this.remind[l].status === 0) {
              this.remind[l].status = []
              this.remind[l].status.push('禁用')
              this.remind[l].status.push('0')
            } else {
              this.remind[l].status = []
              this.remind[l].status.push('启用')
              this.remind[l].status.push('1')
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      remindCurrentChange(val) {
        this.remindBody.data.page.page_number = (val) + ''
        this.getRemindList()
      },
      // 每页显示多少条
      remindSizeChange(pageSize) {
        this.remindBody.data.page.page_size = (pageSize) + ''
        this.getRemindList()
      },
      // 查看提醒策略
      lookJump(index, row) {
        console.log(row)
        var looknumber = row.fittings_id
        this.$router.push({
          path: '/monitor/system/components/strateygsLook',
          query: {
            fittingsId: looknumber
          }
        })
      },
      editJump(index, row) {
        console.log(row)
        var editnumber = row.fittings_id
        this.$router.push({
          path: '/monitor/system/components/strateygsEdit',
          query: {
            fittingsId: editnumber
          }
        })
      },
      // 删除弹框
      toDeleteDialog(index, row) {
        this.deleteid.push(row.fittings_id)
        this.$confirm('确认删除策略？', '提示', {
          customClass: 'deleteDialog',
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.onlyDelete()
        }).catch(() => {
        })
      },
      // 单个删除操作
      onlyDelete() {
        this.deleteRemindBody.ids = this.deleteid
        axios.post('/fittings', this.deleteRemindBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.deleteid = []
          this.deleteRemindBody.ids = ''
          this.remindBody.data.page.page_number = '1'
          this.getRemindList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 启用
      showEnable(index, row) {
        this.dialogEnable = true
        this.remindEnable.ids = []
        this.remindEnable.ids.push(row.fittings_id)
      },
      enableWork() {
        axios.post('/fittings', this.remindEnable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogEnable = false
          this.remindEnable.ids = []
          this.getRemindList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 禁用
      showDisable(index, row) {
        this.dialogDisable = true
        this.remindDisable.ids = []
        this.remindDisable.ids.push(row.fittings_id)
      },
      disableWork() {
        axios.post('/fittings', this.remindDisable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogDisable = false
          this.remindDisable.ids = []
          this.getRemindList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      addReminding() {
        this.$router.push({
          path: '/monitor/system/components/strateygsAdd'
        })
      },
      getFitting() {
        axios.post('/basicdata', this.fittingGet, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.options = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .safe-containner{
    width: 100%;
    overflow: auto;
    padding: 20px;
    .outMore{
      height: 40px;
      padding-top: 2px;
      border-bottom: 1px solid #E1E1E1;
    }
    .dataTitle {
      padding-left: 5px;
      border-left: 5px solid #25B6C7;
      height: 16px;
      font-size: 16px;
      color: #323842;
    }
    .safeSearch{
      width: 100%;
      height: 50px;
    }
    /deep/ .gutter {
      background: rgb(216, 222, 232);
    }
    .safeTableList{
      width: 100%;
      height: 500px;
    }
    .footerPage{
      float: right;
      margin-top: 15px;
      position: relative;
    }
    .tableIcon {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #25B7C8;
    }
    .segmentingLine {
      font-size: 20px;
    }
    .gutter {
      background: rgb(216, 222, 232);
    }
    /deep/ .delete {
      display: inline;
      margin-left: 10px;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-weight: 700;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-textarea__inner {
      resize: none;
    }
    /deep/ .el-dialog {
      border-radius: 5px;
    }
    /deep/ .el-dialog__header {
      background: #E3E6EE;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 20px 9px 20px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      line-height: 20px;
    }
    /deep/ .el-dialog__headerbtn {
      top: 15px;
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .el-table::before {
      height: 0px;
    }
    /deep/ .el-table .cell {
      white-space: pre-line;
    }
    /deep/ .relation {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #25B7C8;
    }
    /deep/ .el-textarea__inner {
      border: none;
    }
    /deep/ .el-form-item {
      margin-bottom: 10px;
    }
    /deep/ img {
      vertical-align: middle;
      margin-bottom: 3px;
    }
    /deep/ [class*=" el-icon-"], [class^=el-icon-] {
      font-weight: 700;
    }
    /deep/ .el-tree {
      background: #EAEDF1;
      padding: 10px;
    }
    /deep/ .el-dialog {
      width: 800px;
    }
    /deep/ .notes {
      float: left;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #69727E;
    }
    /deep/ .clears{
      padding: 6px 16px;
      background-color: #333B3D;
      border-color: #333B3D ;
      color: #fff;
      float: right;
      margin-left: 10px;
    }
    /deep/ .el-icon-minus {
      color: #D05133;
    }
    /deep/ .block {
      height: 30px;
      line-height: 30px;
      float: right;
    }
    /deep/ .timeInterval {
      height: 30px;
      width: 365px;
      float: right;
    }
    /deep/ .enableDisableLeft {
      margin-left: 10px;
    }
    /deep/ .el-tag {
      background-color: transparent;
      border: none;
    }
    /deep/ .el-tag--success {
      background-color: transparent;
      color: #E53D41;
    }
    /deep/ .el-message-box__message p {
      text-indent: 160px!important;
    }
    /deep/ .el-message-box{
      width: 540px;
    }
    /deep/ .el-message-box__header{
      background-color: #E3E6EE;
      padding: 10px 15px;
    }
    /deep/ .el-message-box__title{
      font-size: 18px;
      font-weight: Bold;
      color: #323842;
    }
    /deep/ .el-message-box__status{
      right: 247px;
      top: 65px;
      font-size: 48px !important;
    }
    /deep/ .el-message-box__status.el-icon-warning{
      color: #E53D41;
    }
    /deep/ .el-message-box__content{
      height: 182px;
    }
    /deep/ .el-message-box__status + .el-message-box__message {
      padding-left: 20px;
      padding-right: 12px;
    }
    /deep/ .el-message-box__message p {
      margin: 0;
      font-size: 18px;
      color: #323842;
      padding-top: 96px;
      text-align: center;
    }
    /deep/ .el-message-box__headerbtn{
      top: 9px;
      font-size: 18px;
    }
    /deep/ .el-message-box__btns{
      padding: 10px 15px 7px ;
      border-top: 1px solid #e8eaf1;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-message-box{
      width: 540px;
    }
    /deep/ .el-message-box__header{
      background-color: #E3E6EE;
      padding: 10px 15px;
    }
    /deep/ .el-message-box__title{
      font-size: 18px;
      font-weight: Bold;
      color: #323842;
    }
    /deep/ .el-message-box__status{
      right: 247px;
      top: 65px;
      font-size: 48px !important;
    }
    /deep/ .el-message-box__status.el-icon-warning{
      color: #E53D41;
    }
    /deep/ .el-message-box__content{
      height: 182px;
    }
    /deep/ .el-message-box__status + .el-message-box__message {
      padding-left: 20px;
      padding-right: 12px;
    }
    /deep/ .el-message-box__message p {
      margin: 0;
      font-size: 18px;
      color: #323842;
      padding-top: 96px;
      text-align: center;
    }
    /deep/ .el-message-box__headerbtn{
      top: 9px;
      font-size: 18px;
    }
    /deep/ .el-message-box__btns{
      padding: 10px 15px 7px ;
      border-top: 1px solid #e8eaf1;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__body {
      text-align: center;
      font-size: 18px;
      height: 180px;
      border-bottom: 1px solid #e8eaf1;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer {
      height: 60px;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer > .dialog-footer > button {
      height: 30px;
      font-size: 14px;
      padding: 6px 16px;
    }
    .outMost{
      width: 100%;
      height: 50px;
      background-color: #EFF3F6;
      padding-top: 5px;
      padding-left: 20px;
    }
    /deep/ label {
      font-weight: normal;
      color: #69727E;
    }
    /deep/ .handItem {
      margin-bottom: 5px!important;
    }
    /deep/ .indieWidth {
      padding: 6px 8px;
    }
    /deep/ .el-button + .el-button {
      margin-left: 5px;
    }
    /deep/ .el-button--primary {
      height: 30px;
      font-size: 14px;
      padding: 6px 16px;
      background: #25B6C7;
      border-color: #25B6C7;
    }
    /deep/ .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    /deep/ .handInput {
      width: 160px;
    }
    /deep/ .clear{
      padding: 6px 16px;
      background-color: #333B3D;
      border-color: #333B3D ;
      color: #fff;
    }
  }
</style>
